<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    :width="500"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      :disabled="mode == 'show'"
      ref="dialogForm"
      label-width="100px"
    >
      <el-form-item label="科目名称" prop="type">
        <el-select v-model="form.type" placeholder="请选择科目名称">
            <el-option
              v-for="item in selectClassify"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        <!-- <el-input v-model="form.type" placeholder="请输入科目名称" clearable></el-input> -->
      </el-form-item>
      <el-form-item label="课程名称" prop="subType">
        <el-input v-model="form.subType" placeholder="请输入课程名称" clearable></el-input>
      </el-form-item>
      
      <!-- <el-form-item label="课件链接" prop="url">
        <el-input v-model="form.url" placeholder="请输入课件链接" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="课件大小" prop="memory">
        <el-input v-model="form.memory" placeholder="请输入课件大小" clearable></el-input>
      </el-form-item>
      <el-form-item label="加载时长" prop="loadTime">
        <el-input v-model="form.loadTime" placeholder="请输入加载时长" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="mode != 'show'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      selectClassify: {},
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        id: "",
        type: "",
        subType: "",
        //url: "",
        loadTime: "",
        memory: "",
      },
      //验证规则
      rules: {
        type: [{ required: true, message: "请输入科目名称" }],
        subType: [{ required: true, message: "请输入课程名称" }],
        //url: [{ required: true, message: "请输入课件链接" }],
      },
    };
  },
  mounted() {
    const res = this.$API.courseware.courseclassify.get();
    res.then(v => {
      this.selectClassify = v.data;
    }).catch();
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    async submit() {
      var valid = await this.$refs.dialogForm.validate().catch(() => {});
      if (!valid) {
        return false;
      }
      this.isSaveing = true;
      var res = await this.$API.courseware.add.post(this.form);
      this.isSaveing = false;
      if (res.code == 200) {
        this.$emit("success", this.form, this.mode);
        this.visible = false;
        this.$message.success("操作成功");
      } else {
        this.$alert(res.message, "提示", { type: "error" });
      }
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
    },
  },
};
</script>

<style></style>
